<template>
<div>
  <div>
  <el-button type="primary" @click="insert()">添加小区</el-button>
  </div>

  <el-table

    :data="tableData"
    style="width: 100%"
    max-height="500">
    
    <el-table-column
      prop="name"
      label="小区名"
      width="200">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="200">
    </el-table-column>
    <el-table-column
      prop="introduce"
      label="介绍"
      width="300">
    </el-table-column>
    <el-table-column
      prop="helpPhone"
      label="物业电话"
      width="250">
    </el-table-column>
    
    <el-table-column
      fixed="right"
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope, tableData)"
          type="text"
          size="small">
          修改信息
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 查看详情对话框 -->
  <el-dialog
    title="详情"
    :visible.sync="dialogVisible"
    width="50%"
  >
    <div>
      <div>
        <div>
          小区名：<el-input v-model="current.name" placeholder="请输入内容"></el-input>
        </div>
        <div>
          地址：<el-input v-model="current.address" placeholder="请输入内容"></el-input>
        </div>
        <div>
          介绍：<el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入内容"
                  v-model="current.introduce">
                </el-input>
        </div>
      </div>
    
      <div>
        <br>
        <br>
      </div>

      <span slot="footer" class="dialog-footer">
        
        <el-button type="primary" @click="close()">确 定</el-button>
      </span>
    </div>
  </el-dialog>

  <!-- 添加小区 -->
  <el-dialog
    title="添加物业及小区"
    :visible.sync="addVisible"
    width="25%"
  >
    <div>
      <div>
        <div>
          用户名：<el-input v-model="regisInfo.user.username" placeholder="请输入用户名" size="mini"></el-input>
        </div>
        <div>
          密码：<el-input v-model="regisInfo.user.password" placeholder="请输入密码" size="mini"></el-input>
        </div>
        <div>
          昵称：<el-input v-model="regisInfo.user.nickname" placeholder="请输入昵称" size="mini"></el-input>
        </div>
        <div>
          联系电话：<el-input v-model="regisInfo.user.phone" placeholder="请输入联系电话" size="mini"></el-input>
        </div>
        <div>
          小区名：<el-input v-model="regisInfo.community.name" placeholder="请输入小区名" size="mini"></el-input>
        </div>
        <div>
          地址：<el-input v-model="regisInfo.community.address" placeholder="请输入地址" size="mini"></el-input>
        </div>
        <div>
          管家电话：<el-input v-model="regisInfo.community.helpPhone" placeholder="请输入管家电话" size="mini"></el-input>
        </div>
        <div>
          介绍：<el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="regisInfo.community.introduce">
                </el-input>
        </div>
      </div>
    
      <div>
        <br>
        <br>
      </div>

      <span slot="footer" class="dialog-footer">
        
        <el-button type="primary" @click="addsure()">确 定</el-button>
      </span>
    </div>
  </el-dialog>
  </div>
</template>

<script>
  export default {
    methods: {

      deleteRow(scope, rows) {
        console.log(scope.row);
        this.current = scope.row
        this.dialogVisible = true
      },

      addsure(){
        this.$axios.post("http://localhost:8080/community/addPropertyCommunity",this.regisInfo).then(res => {
        })
         this.tableData.push(this.regisInfo.community)
         this.addVisible = false
      },

      close(){
        this.dialogVisible = false,
        this.addVisible = false
      },

      insert(){

        this.addVisible = true
      }
    },
    data() {
      return {
        tableData: [],
        current:{},
        currentadd:{},
        dialogVisible:false,
        addVisible:false,
        regisInfo:{
          user:{},
          community:{},
          propertyView:true
        }
      }
    },
    mounted(){
       this.$axios.get("http://localhost:8080/community/findAllCommunity").then(res => {
          this.tableData = res.data.data
        })
    }

  }
</script>